<style lang="less" scoped>
	.login {
		a {
			text-decoration: none;
		}

		background: linear-gradient(to bottom, #f96a64, #feb47b);
		width: 100%;
		height: 100%;
		position: absolute;

		// left: 10%;
		.contaier {
			width: 80%;
			margin-left: 10%;
		}

		.logo {
			width: 40%;

			img {
				width: 100%;
			}

			background-color: #eb4953;
			border-radius: 12px;
			margin-left: calc(30%);
			margin-top: 60px;
		}

		.iphone {
			width: 100%;

			// height: 100%;
			input {
				margin-top: 40px;
				height: 40px;
				border-radius: 20px;
				border: 1px solid #fefefe;
				text-indent: 2em;
				color: white;
			}

			input::placeholder {
				color: white;
			}
		}

		.password {
			width: 100%;

			// height: 100%;
			input {
				margin-top: 15px;
				height: 40px;
				border-radius: 20px;
				border: 1px solid #fefefe;
				text-indent: 2em;
				color: white;
			}

			input::placeholder {
				color: white;
			}
		}

		.identify {
			display: flex;
			flex-wrap: nowrap;

			// justify-content: space-between;
			button {
				margin-top: 15px;
				height: 40px;
				line-height: 40px;
				font-size: 12px;
				border-radius: 0;
				border-top-right-radius: 20px;
				border-bottom-right-radius: 20px;
			}

			input {
				margin-top: 15px;
				height: 40px;
				text-indent: 2em;
				width: 80%;
				border-radius: 20px;
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
				border: 1px solid #fefefe;
				box-sizing: border-box;
				margin-right: -30px;
				color: #fefefe;
			}
		}

		.btn {
			margin-top: 15px;

			button {
				border-radius: 25px;
				background-color: #eb4953;
				color: white;
			}
		}

		.text {
			margin-top: 15px;
			width: 100%;
			display: flex;
			justify-content: space-between;
			color: #fefefe;
		}

		.protocol {
			margin: 15px;
			display: flex;
			width: 100%;

			input {
				width: 13%;
				margin-right: 10px;
			}
		}
	}
</style>
<template>
	<view class="login">
		<div class="contaier">
			<div class="logo">
				<img src="../../static/logo.png" alt="" />
			</div>
			<div class="iphone">
				<input type="text" v-model="account" placeholder="请输入账号" placeholder-style="color: #fefefe; opacity: 0.7;" />
			</div>
			<div class="password">
				<input type="password" v-model="password" placeholder="请输入密码" placeholder-style="color: #fefefe; opacity: 0.7;" />
			</div>
			<!-- <div class="identify">
				<input type="text" placeholder="请输入手机验证码" placeholder-style="color: #fefefe; opacity: 0.7;" />
				<button>获取验证码</button>
			</div> -->
			<div class="btn">
				<button @click="login">登录</button>
			</div>
			<div class="text">
				<span @click="register()">注册账号</span>
				<span> 忘记密码</span>
			</div>
			<div class="protocol">
				<input type="checkbox" @click="isCheck()" />
				<span>我已阅读并同意<a href="#">《服务条款》</a>
					<a href="#">《隐私政策》</a>
					<a href="#">《中国移动认证服务协议》</a></span>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isSelect: false,
				account:'',
				password:'',
			}
		},
		methods: {
			isCheck() {
				this.isSelect = !this.isSelect
			},
			login() {
				if(this.account==""||this.password==''){
					uni.showToast({
						title: '账号或密码不能为空',
						icon: 'none'
					});
				}else{
					if (this.isSelect) {
					uni.getStorage({
					        key: this.account, // 要获取的键
					        success: (res) => {
					          if(this.password==res.data){
								  uni.showToast({
								    title: '登录成功，稍后跳转首页',
								    icon: 'none'
								  });
								  localStorage.setItem("AUTO_TOKEN",this.account);
								  setTimeout(()=>{
									  uni.switchTab({
									  	url:"/pages/index/index"
									  })
								  })
							  }else{
								  uni.showToast({
								    title: '密码错误,请重新输入',
								    icon: 'none'
								  });
							  }
					        },
					        fail: () => {
					          uni.showToast({
					            title: '账号未存在，请先注册',
					            icon: 'none'
					          });
					        }
					      });
				} else {
					uni.showToast({
						title: '请先同意条款',
						icon: 'none'
					});
				}
				}
				
			},
			register(){
				uni.redirectTo({url:'/pages/register/register'})
			}
		}
	}
</script>